<template>
    <div class="MaxBox" style="text-align: center;background-color: #f1f1f3;height: 100%;padding: 0px;margin: 0px;">
        <h1 style="font-size: 30px;">{{'欢迎你！'+user.name}}</h1>
        <el-descriptions  title="个人中心" :column="2" size="40" border>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-s-custom"></i>
                    账号
                </template>
                性别
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-mobile-phone"></i>
                    电话
                </template>
                角色
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-location-outline"></i>
                  {{user.no}}
                </template>
                <el-tag
                        :type="user.sex === '1' ? 'primary' : 'danger'"
                        disable-transitions><i :class="user.sex==1?'el-icon-male':'el-icon-female'"></i>{{user.sex==1?"男":"女"}}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
                <template slot="label">
                    <i class="el-icon-tickets"></i>
                  {{user.phone}}
                </template>
                <el-tag
                        type="success"
                        disable-transitions>{{user.roleId==0?"超级管理员":(user.roleId==1?"管理员":"用户")}}</el-tag>

            </el-descriptions-item>
        </el-descriptions>

        <DateUtils></DateUtils>

<!--      图表统计 -->
      <div class="chart-container" style="display: flex; justify-content: center; align-items: center;">
        <div id="FunnelChart" style="width: 500px; height: 500px; margin-right: 100px;">图渲染在此处</div>
        <div id="YuanChart" style="width: 500px; height: 500px;">图渲染在此处</div>
      </div>
    </div>
</template>

<script>
    import DateUtils from "./DateUtils";
    import * as echarts from 'echarts';
    export default {
        name: "Home",
        components: {DateUtils},
        data() {

            return {
                user:{}
            }
        },
      mounted() {
          //加载图表
          this.loadFunnelCharts();
          this.loadYuanCharts();
      },

      computed:{},
        methods:{
            init(){
                this.user = JSON.parse(sessionStorage.getItem('CurUser'))
            },

          //加载图表
          loadFunnelCharts(){
            var app = {};

            var chartDom = document.getElementById('FunnelChart');
            var myChart = echarts.init(chartDom);
            var option;

            const categories = (function () {
              let now = new Date();
              let res = [];
              let len = 10;
              while (len--) {
                res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
                now = new Date(+now - 2000);
              }
              return res;
            })();
            const categories2 = (function () {
              let res = [];
              let len = 10;
              while (len--) {
                res.push(10 - len - 1);
              }
              return res;
            })();
            const data = (function () {
              let res = [];
              let len = 10;
              while (len--) {
                res.push(Math.round(Math.random() * 1000));
              }
              return res;
            })();
            const data2 = (function () {
              let res = [];
              let len = 0;
              while (len < 10) {
                res.push(+(Math.random() * 10 + 5).toFixed(1));
                len++;
              }
              return res;
            })();
            option = {
              title: {
                text: '记录柱状图'
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  label: {
                    backgroundColor: '#283b56'
                  }
                }
              },
              legend: {},
              toolbox: {
                show: true,
                feature: {
                  dataView: { readOnly: false },
                  restore: {},
                  saveAsImage: {}
                }
              },
              dataZoom: {
                show: false,
                start: 0,
                end: 100
              },
              xAxis: [
                {
                  type: 'category',
                  boundaryGap: true,
                  data: categories
                },
                {
                  type: 'category',
                  boundaryGap: true,
                  data: categories2
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  scale: true,
                  name: 'Price',
                  max: 30,
                  min: 0,
                  boundaryGap: [0.2, 0.2]
                },
                {
                  type: 'value',
                  scale: true,
                  name: 'Order',
                  max: 1200,
                  min: 0,
                  boundaryGap: [0.2, 0.2]
                }
              ],
              series: [
                {
                  name: 'Dynamic Bar',
                  type: 'bar',
                  xAxisIndex: 1,
                  yAxisIndex: 1,
                  data: data
                },
                {
                  name: 'Dynamic Line',
                  type: 'line',
                  data: data2
                }
              ]
            };
            app.count = 11;
            setInterval(function () {
              let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
              data.shift();
              data.push(Math.round(Math.random() * 1000));
              data2.shift();
              data2.push(+(Math.random() * 10 + 5).toFixed(1));
              categories.shift();
              categories.push(axisData);
              categories2.shift();
              categories2.push(app.count++);
              myChart.setOption({
                xAxis: [
                  {
                    data: categories
                  },
                  {
                    data: categories2
                  }
                ],
                series: [
                  {
                    data: data
                  },
                  {
                    data: data2
                  }
                ]
              });
            }, 2100);

            option && myChart.setOption(option);
          },



          loadYuanCharts(){
            var chartDom = document.getElementById('YuanChart');
            var myChart = echarts.init(chartDom);
            var option;

            setTimeout(function () {
              option = {
                legend: {},
                tooltip: {
                  trigger: 'axis',
                  showContent: false
                },
                dataset: {
                  source: [
                    ['product', '2012', '2013', '2014', '2015', '2016', '2017'],
                    ['Milk Tea', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
                    ['Matcha Latte', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
                    ['Cheese Cocoa', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
                    ['Walnut Brownie', 25.2, 37.1, 41.2, 18, 33.9, 49.1]
                  ]
                },
                xAxis: { type: 'category' },
                yAxis: { gridIndex: 0 },
                grid: { top: '55%' },
                series: [
                  {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                  },
                  {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                  },
                  {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                  },
                  {
                    type: 'line',
                    smooth: true,
                    seriesLayoutBy: 'row',
                    emphasis: { focus: 'series' }
                  },
                  {
                    type: 'pie',
                    id: 'pie',
                    radius: '30%',
                    center: ['50%', '25%'],
                    emphasis: {
                      focus: 'self'
                    },
                    label: {
                      formatter: '{b}: {@2012} ({d}%)'
                    },
                    encode: {
                      itemName: 'product',
                      value: '2012',
                      tooltip: '2012'
                    }
                  }
                ]
              };
              myChart.on('updateAxisPointer', function (event) {
                const xAxisInfo = event.axesInfo[0];
                if (xAxisInfo) {
                  const dimension = xAxisInfo.value + 1;
                  myChart.setOption({
                    series: {
                      id: 'pie',
                      label: {
                        formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                      },
                      encode: {
                        value: dimension,
                        tooltip: dimension
                      }
                    }
                  });
                }
              });
              myChart.setOption(option);
            });

            option && myChart.setOption(option);
          }

        },
        created(){
            this.init()
        }
    }
</script>

<style scoped>
    .el-descriptions{
        width:90%;

        margin: 0 auto;
        text-align: center;
    }
</style>